<template>
  <div class="app-container" style="margin:auto">
    <div class="weChatList">
      <div class="message" v-if="linkList.length > 0" v-for="(items, key, index) in linkList">
        <div class="avatar">
          <img :src="items.headimg" />
        </div>
        <div class="nickname">
          <span>{{ items.nickname }}</span>
        </div>
        <div class="close">
          <el-button type="primary" @click="changgeUntied(items, key, index)">解绑</el-button>
        </div>
      </div>
    </div>
    <template v-if="QRCode">
      <div>
        <img :src="QRCode" />
      </div>
      <div class="binding">打开微信扫码绑定</div>
    </template>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth"; // get token from cookie
var QRCode = require("qrcode");

export default {
  data() {
    const confirmPassword = (rule, value, callback) => {
      if (value) {
        if (value !== this.temp.new_password) {
          callback("两次密码不一致");
        } else {
          callback();
        }
      } else {
        callback("请确认密码");
      }
    };
    return {
      regionId: "",
      type: "",
      temp: {
        old_password: "",
        new_password: ""
      },
      QRCode: "",
      rules: {
        old_password: [
          { required: true, message: "请填写当前密码", trigger: "change" }
        ],
        new_password: [
          { required: true, message: "请填写修改密码", trigger: "change" }
        ],
        confirm_password: [
          { required: true, validator: confirmPassword, trigger: "blur" }
        ]
      },
      linkList: []
    };
  },
  created() {
    this.type = JSON.parse(getToken()).type;
    this.id = JSON.parse(getToken()).id;
    this.determine();
    // this.showQRCode();
  },
  methods: {
    changgeUntied(items, key) {
      const data = {
        id: this.id,
        openid: items.openid
      };
      let api = "";
      if (this.type === 1) {
        api = "pc_admin_cancel";
      } else {
        api = "pc_ad_cancel";
        if (this.type === 2) {
          data["type"] = 1;
        } else {
          data["type"] = 2;
        }
      }
      const adminCancelPath = {
        company: "STQ",
        api: api,
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(adminCancelPath), res => {
        this.socketData(res);
      });
    },
    determine() {
      const wxIndexPath = {
        company: "STQ",
        api: "pc_wx_index",
        version: "1.0",
        data: {}
      };
      this.socketApi.sendSock(JSON.stringify(wxIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    showQRCode() {
      const getBindingCodePath = {
        company: "STQ",
        api: "pc_wx_getBindingCode",
        version: "1.0",
        data: {}
      };
      this.socketApi.sendSock(JSON.stringify(getBindingCodePath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getQRCode(weChatUrl) {
      let QRurl = "";
      if (weChatUrl) {
        QRCode.toDataURL(weChatUrl, function(err, url) {
          if (err) {
            QRurl = "";
          } else {
            QRurl = url;
          }
        });
      } else {
        QRurl = "";
      }
      this.QRCode = QRurl;
    },
    resetTemp() {
      this.temp = {
        old_password: "",
        new_password: ""
      };
    },
    socketData(res) {
      if (res && res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
          // this.$router.push({ path: "/login" });
          this.loading = false;
        } else {
          if (resj.api === "pc_wx_getBindingCode") {
            this.getQRCode(resj.data);
          } else if (resj.api === "pc_wx_index") {
            if (resj.count > 0) {
              let link = [];
              if (
                !(
                  typeof resj.data === "object" &&
                  resj.data.constructor === Array
                )
              ) {
                link.push(resj.data);
              } else {
                link = resj.data;
              }
              this.linkList = link;
              if (
                (this.type !== 1 && link.length < 5) ||
                (this.type === 1 && link.length < 1)
              ) {

                this.showQRCode();
              } else {
                this.QRCode = "";
              }
            } else {
              this.linkList = [];
              this.showQRCode();
            }
          } else if (resj.api === "pc_wx_bindingSuccess") {
            this.determine();
          } else if (resj.api === "pc_ad_cancel") {
            this.$notify({
              title: "成功",
              message: "解绑成功",
              type: "success",
              duration: 2000
            });
            this.determine();
          } else if (resj.api === "pc_admin_cancel") {
            this.$notify({
              title: "成功",
              message: "解绑成功",
              type: "success",
              duration: 2000
            });
            this.determine();
          } else {
            console.log("resj", resj);
          }
        }
      }
    }
  }
};
</script>
<style scoped>
.app-container div {
  text-align: center;
}
.binding {
  text-align: center;
  font-size: 24px;
  color: #909399;
}
.weChatList {
  text-align: center;
}
.message {
  display: inline-block;
  border: 1px solid #ebeef5;
  padding: 5px;
  margin: 0 5px;
}
</style>
